<script lang="ts" setup>
const title = ref(import.meta.env.VITE_TITLE)
import { ref,onMounted } from 'vue'
import AMapLoader from '@amap/amap-jsapi-loader';
const map = ref(null);
const tabs=ref([
    {
        label:"关于我们",
    },
    {
        label:"新闻咨询",
    },
])
const current = ref<number>(0)
const hoverItemContent = ref<string>('产品描述100字 这款产品是一款高性能的智能手机,拥有强大的处理能力和流畅的操作体验。它采用了最新的技术和设计,拥有精美的外观和轻巧的手感。配备了高清摄像头和大屏幕,能够拍摄出清晰锐利的照片和视频。同时,它还支持快速充电和长久续航,让用户无忧使用。此外,它还内置了丰富的应用程序和功能,可以满足用户的各种...')
const mouserOver = (item:any,index?:number)=>{
    current.value = index
    hoverItemContent.value = item.label
}

onMounted(() => {
  AMapLoader.load({
    key: 'e7de2c60a546f10ab560b41b44ec2bb8', // 高德地图API Key
    version: '2.0', // 指定API版本
    plugins: ['AMap.Geolocation', 'AMap.PlaceSearch', 'AMap.Scale'], // 需要使用的插件
  }).then((AMap) => {
    map.value = new AMap.Map('map', {
      zoom: 15, // 初始缩放级别
      center: [106.499892,29.615377], // 初始中心点坐标
    });
    const marker = new AMap.Marker({
        position: new AMap.LngLat(106.499892,29.615377), // 位置坐标
        map: map.value, // 指定地图
    });
    marker.setLabel({
        content: '重庆乐芒科技',
        offset: new AMap.Pixel(-50, -30),
    });
    marker.setMap(map.value);
  }).catch((e) => {
    console.error(e);
  });
});
</script>

<template>
    <div>
        <el-carousel
            motion-blur
            :autoplay="false"
            style="background: #eee;">
                <el-carousel-item >
                    <img src="https://s1.xiaomiev.com/activity-outer-assets/0328/images/su7/su7_1.jpg?" alt="" class="width100 height100">
                </el-carousel-item>
                <el-carousel-item >
                    <img src="https://s1.xiaomiev.com/activity-outer-assets/0328/images/su7/su7_3.jpg?" alt="" class="width100 height100">
                </el-carousel-item>
                <el-carousel-item >
                    <img src="https://s1.xiaomiev.com/activity-outer-assets/0328/images/su7/su7_2.png?" alt="" class="width100 height100">
                </el-carousel-item>
                <el-carousel-item >
                    <img src="https://s1.xiaomiev.com/activity-outer-assets/0328/images/su7/su7_6_1.jpg?" alt="" class="width100 height100">
                </el-carousel-item>
        </el-carousel>
        <div class="content">
            <div class="tab flex-start gap30">
                <div class="tabItem cursor" :class="current==index?'active':''" @mouseover="mouserOver(item)" @click="mouserOver(item,index)" v-for="item,index of tabs" :key="index">{{ item.label }}</div>
            </div>
            <div class="components between ">
                <div class="descConten between">
                    <img src="https://img0.baidu.com/it/u=2813646527,1969343241&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1719162000&t=157199f7087aea5fee17870bd7814c20" alt="" class="img">
                    <div class="msgBox flex ">
                        
                        {{ hoverItemContent }}
                    </div>
                </div>
            </div>
        </div>

        <div class="youshi ">
            <div class="title text-center">联系我们</div>
            <div class="titleLv text-center">CONTACT US</div>
            <div class="between menu">
                <div class="map" id="map">map</div>
                <div class="lisy">
                    <div class="font28 bold">重庆{{ title }}有限公司</div>
                    <div class="font20 ">
                        <span >电话：</span>
                        <span>4008208820</span>
                    </div>
                    <div class="font20 ">
                        <span >手机：</span>
                        <span>18255784789</span>
                    </div>
                    <div class="font20 ">
                        <span >邮箱：</span>
                        <span>992274811@qq.com</span>
                    </div>
                    <div class="font20 ">
                        <span >地址：</span>
                        <span>重庆市渝北区星光之路78号</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
     @import './index.scss';
</style>